<template>
  <view class="take_init_photo">
    <image class="camera" :src="photoBase64"></image>
    <view class="no_photo_title" style="flex-direction: row;align-items: center;display:flex">
      <image style="width:48rpx;height: 48rpx;"
        src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/camera/examine_icon.svg"></image>
      <view class="noPhoto_title">
        人脸核验中
      </view>
    </view>
    <view class="remark_part">
      <view>请耐心等待</view>
      <!-- 占位高度 -->
      <view style="height:40rpx;"></view>
    </view>

    <view class="help_button"></view>
  </view>
</template>

<script>
import { faceRecognition } from "@/improve/services";
import { mapState } from 'vuex'

export default {
  name: "FacialPhotoExaminePage",
  components: {},
  data() {
    return {
      countdown: 5,
      timer: null, // 计时器
      photoBase64: "",
      photoMode: {
        // 初始化验证
        init: 1,
        // 人工验证上传
        person: 2
      }
    };
  },
  props: [],
  computed: {
    ...mapState(['examinationInfo', 'practiceSettings'])
  },
  created(option) {
    // 在组件创建时启动倒计时计时器
    // this.startCountdown();
    this.photoBase64 = this.$store.state.photoProgressData.photoBase64;
    this.handleGetIsPhotoPass();
  },
  beforeDestroy() {
    // 在组件销毁之前清除计时器
    // clearInterval(this.timer);
  },
  methods: {
    handleGetIsPhotoPass() {
      // 'data:image/png;base64,' + 
      const base64 = 'data:image/png;base64,' + this.photoBase64.split(",")[1]; // 截取除头部信息以外的数据部分
      const type = this.$store.state.photoProgressData.type;
      faceRecognition({ upgPracticeJoinUuid: this.examinationInfo.upgPracticeJoinUuid, type, funcWay: 1 }, base64).then(res => {
        if (res) {
          //成功后人脸检验状态初始状态
          this.$store.commit('updateProgressData', {
            progressPhoto: 1,
            checkNum: 0,
            uuid: "",
          });
          // 验证成功 - 跳转考试
          uni.reLaunch({
            url: `/improve/join/examination/index?upgPracticeJoinUuid=${this.examinationInfo.upgPracticeJoinUuid}&id=${this.practiceSettings.id}&bhCheckId=${this.examinationInfo.bhCheckId}&bhCheckUuid=${this.examinationInfo.bhCheckUuid}&isPaper=true&testTime=${this.practiceSettings.time}&title=${this.practiceSettings.practiceName}`,
          })
        } else {
          this.checkError()
        }
      }).catch(err => {
        console.error("校验异常")
        this.checkError()
      })
    },
    checkError() {
      const checkNum = this.$store.state.photoProgressData.checkNum;
      //校验失败（可以有两次校验机会）
      if (checkNum >= 1) {
        uni.showModal({
          title: '提示',
          content: '人脸验证失败，无法进行练习',
          showCancel: false,
          success: function (res) {
            uni.navigateBack() //返回上一页
          }
        });
      }
      this.$store.commit('updateProgressData', {
        progressPhoto: 1,
        checkNum: checkNum + 1,
      });
    }
  },
}
</script>

<style lang="scss">
.camera {
  width: 360rpx;
  height: 360rpx;
  border-radius: 50%;
  border: 10px solid #E7F8FF;
  overflow: hidden;
  z-index: 10000;
}

.take_init_photo {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  .no_photo_title {
    padding: 80rpx 0px;

    .noPhoto_title {
      color: #333;
      padding-left: 15rpx;
      font-size: 16px;
      font-weight: 700;
    }
  }

  .remark_part {
    color: #333;
    text-align: center;
    font-size: 26rpx;
  }

  .help_button {
    width: 50%;
    height: 60rpx;
    margin: 400rpx 0rpx 100rpx 0rpx;
  }
}
</style>